<template>
	<!-- 图生图 -->
	<view class="">
		<view class="bgWhite plr-24 pt-20 pb-40 radius-16">
			<view v-if="type === 'a'" class="flex">
				<view class="" @click.stop="handleUse(1)">
					<view class="bgMinor hidden renClass radius-16 center" style="width: 250rpx; height: 333rpx">
						<view class=" ">
							<uv-icon name="plus" color="#E1E1E1" size="56rpx" bold></uv-icon>
						</view>
					</view>
					<view class="tc mt-24 lineHeight1 size-34">人像</view>
				</view>
				<view class="">
					<uv-image src="/static/images/zhuanhuan.png" width="47rpx" height="38rpx"></uv-image>
				</view>
				<view class="" @click.stop="handleUse(2)">
					<view class="bgMinor hidden renClass radius-16 center" style="width: 250rpx; height: 333rpx">
						<view class=" ">
							<uv-icon name="plus" color="#E1E1E1" size="56rpx" bold></uv-icon>
						</view>
					</view>
					<view class="tc mt-24 lineHeight1 size-34">服装</view>
				</view>
			</view>

			<view v-if="type === 'b'" class="center">
				<view>
					<view class="bgMinor hidden renClass radius-16 center" style="width: 250rpx; height: 333rpx">
						<view class=" ">
							<uv-icon name="plus" color="#E1E1E1" size="56rpx" bold></uv-icon>
						</view>
					</view>
					<view class="tc mt-24 lineHeight1 size-34">人像</view>
				</view>
			</view>

			<view class="mt-48">
				<uv-textarea
					v-model="dataInfo.remark"
					placeholder="描述你想要创作的内容..."
					:maxlength="-1"
					border="none"
					:customStyle="{ background: '#f5f5f5', borderRadius: '16rpx' }"
					:placeholderStyle="{ color: '#333', opacity: '0.3', fontSize: '24rpx' }"
				></uv-textarea>
			</view>
		</view>

		<view class="bgWhite mt-24 plr-24 pt-20 pb-40 radius-16">
			<view class="">
				<view class="size-34 weight-5">图片比例</view>
				<view class="">
					<view class="flex1 flex-wrap">
						<view
							@click.stop="handleRatio(0)"
							:class="{ xgItemOn: dataInfo.ratioIndex == 0 }"
							class="flex1 flex-middle pointer border-d2 radius-9 mt-24 plr-10 ptb-5 mr-16"
						>
							<view class="border-d radius-5" style="width: 20rpx; height: 35rpx"></view>
							<view class="ml-10">9:16</view>
						</view>
						<view
							@click.stop="handleRatio(1)"
							:class="{ xgItemOn: dataInfo.ratioIndex == 1 }"
							class="flex1 flex-middle pointer border-d2 radius-9 mt-24 plr-10 ptb-5 mr-16"
						>
							<view class="border-d radius-5" style="width: 26rpx; height: 34rpx"></view>
							<view class="ml-10">3:4</view>
						</view>
						<view
							@click.stop="handleRatio(2)"
							:class="{ xgItemOn: dataInfo.ratioIndex == 2 }"
							class="flex1 flex-middle pointer border-d2 radius-9 mt-24 plr-10 ptb-5 mr-16"
						>
							<view class="border-d radius-5" style="width: 35rpx; height: 35rpx"></view>
							<view class="ml-10">1:1</view>
						</view>
						<view
							@click.stop="handleRatio(3)"
							:class="{ xgItemOn: dataInfo.ratioIndex == 3 }"
							class="flex1 flex-middle pointer border-d2 radius-9 mt-24 plr-10 ptb-5 mr-16"
						>
							<view class="border-d radius-5" style="width: 34rpx; height: 26rpx"></view>
							<view class="ml-10">4:3</view>
						</view>
						<view @click.stop="handleRatio(4)" :class="{ xgItemOn: dataInfo.ratioIndex == 4 }" class="flex1 flex-middle pointer border-d2 radius-9 mt-24 plr-10 ptb-5">
							<view class="border-d radius-5" style="width: 35rpx; height: 20rpx"></view>
							<view class="ml-10">16:9</view>
						</view>
					</view>
				</view>
			</view>

			<view v-if="type === 'a'" class="mt-40">
				<view class="size-34 weight-5">效果</view>
				<view class="">
					<view class="mt-24 size-20 color-black3">镜头视角</view>
					<view class="">
						<view class="flex1 flex-wrap">
							<view v-for="(item, index) in dataInfo.itemList1" :key="index" class="border-d2 radius-9 mt-15 mr-16 size-24 xgItemClass pointer">
								<view>{{ item.name }}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="">
					<view class="mt-24 size-20 color-black3">人像</view>
					<view class="">
						<view class="flex1 flex-wrap">
							<view v-for="(item, index) in dataInfo.itemList2" :key="index" class="border-d2 radius-9 mt-15 mr-16 size-24 xgItemClass pointer">
								<view>{{ item.name }}</view>
							</view>
						</view>
					</view>
				</view>

				<view class="">
					<view class="mt-24 size-20 color-black3">光线</view>
					<view class="">
						<view class="flex1 flex-wrap">
							<view v-for="(item, index) in dataInfo.itemList3" :key="index" class="border-d2 radius-9 mt-15 mr-16 size-24 xgItemClass pointer">
								<view>{{ item.name }}</view>
							</view>
						</view>
					</view>
				</view>

				<view class="">
					<view class="mt-24 size-20 color-black3">背景</view>
					<view class="">
						<view class="flex1 flex-wrap">
							<view v-for="(item, index) in dataInfo.itemList4" :key="index" class="border-d2 radius-9 mt-15 mr-16 size-24 xgItemClass pointer">
								<view>{{ item.name }}</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view v-else-if="type === 'b'" class="mt-40">
				<view class="size-34 weight-5">风格</view>
				<view class="">
					<view class="">
						<view class="flex1 XScroll">
							<view v-for="(item, index) in 4" :key="index" @click.stop="handleStyle(index)" class="mt-24 mr-16 fgItemClass pointer relative">
								<!-- bgMinor -->
								<view class="flex">
									<uv-image src="/static/images/nan2.png" width="230rpx" height="306rpx" radius="8px"></uv-image>
								</view>
								<view v-if="dataInfo.fgIndex === index" class="fgXuanzhong">
									<uv-image src="/static/images/xuanzhong.png" width="21rpx" height="21rpx" radius="8px"></uv-image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { getWindowHeight } from '@/pages/util/getHeight';
import { addOpen, loggedIn, addOpenTab } from '@/pages/util/hooks';
import useLoginStore from '@/pinia-store/userInfoStore';
const useLogin = useLoginStore();
const emit = defineEmits(['fOpen'])
// console.log('useLoginuseLogin',useLogin);
/* const props = defineProps({
	title: {
		type: String,
		default: "",
	},
	modalList: {
		type: Array,
		default: () => [],
	},
}); */
const { type } = withDefaults(
	defineProps<{
		type: String;
		// info: Array<T>;
	}>(),
	{
		type: () => 'a' // 默认值 a一键换装 b个性定制
		// info: () => null // 复杂数据类型使用函数返回的方式
	}
);
console.log('props ==>typetypetypetype', type);
/** @name 数据 */
const dataInfo = reactive({
	ratioIndex: 1,
	fgIndex: 0,
	effectIndex: [],
	itemList1: [
		{ name: '大景深' },
		{ name: '全景' },
		{ name: '长焦镜头' },
		{ name: '微距镜头' },
		{ name: '全身镜头' },
		{ name: '中景镜头' },
		{ name: '七分身镜头' },
		{ name: '半身像' },
		{ name: '航拍' },
		{ name: '蜗牛视角' },
		{ name: '鸟瞰视角' },
		{ name: '剪影视角' },
		{ name: '透视拍摄' },
		{ name: '多重曝光视角' },
		{ name: '鱼眼镜头' }
	],
	itemList2: [
		{ name: '肖像精细' },
		{ name: '街头摄影' },
		{ name: '时尚摄影' },
		{ name: '艺术肖像' },
		{ name: '黑白' },
		{ name: '复古风' },
		{ name: '色彩鲜明' },
		{ name: '梦幻效果' }
	],
	itemList3: [
		{ name: '摄影棚光' },
		{ name: '自然光' },
		{ name: '聚光灯' },
		{ name: '格莱美光' },
		{ name: '背景光' },
		{ name: '电影级光照' },
		{ name: '轮廓光' },
		{ name: '体积光' },
		{ name: '丁达尔效应' },
		{ name: '氛围灯光' },
		{ name: '霓虹灯' },
		{ name: '日落光' },
		{ name: '彩虹光' },
		{ name: '荧光灯光' },
		{ name: '月光' },
		{ name: '晨光' },
		{ name: '暮光' },
		{ name: '直射日光' }
	],
	itemList4: [
		{ name: '自然主义' },
		{ name: '极简主义' },
		{ name: '长曝光' },
		{ name: '黄金时刻' },
		{ name: '超现实主义' },
		{ name: '蓝调时刻' },
		{ name: 'HDR' },
		{ name: '城市街景' },
		{ name: '夜景' },
		{ name: '水下摄影' },
		{ name: '柔焦' },
		{ name: '天空' }
	],
	remark:'',
});

/** @name 图片比例事件 */
function handleRatio(index: number) {
	console.log('比例事件index', index);
	dataInfo.ratioIndex = index;
}

/** @name 风格事件 */
function handleStyle(index: number) {
	console.log('比例事件index', index);
	dataInfo.fgIndex = index;
}


/** @name 使用 */
async function handleUse(index: number) {
	console.log('使用');
	emit('fOpen')
	// popupUseRef.value?.open();
	
}
</script>

<style scoped lang="scss">
// :deep(.checklist-box) {
// 	//  模版
// }
// 效果
.xgItemClass {
	padding: 0 12rpx;
	min-width: 119rpx;
	height: 49rpx;
	line-height: 49rpx;
	text-align: center;
}
.xgItemOn {
	color: white;
	background-color: $ai-primary;
	border-color: $ai-primary;

	.border-d {
		border-color: white;
	}
}

// 风格
.fgItemClass {
}

.fgXuanzhong {
	position: absolute;
	right: 16rpx;
	top: 16rpx;
}
</style>
